<template>
  <el-dialog
    top="30px"
    width="1000px"
    append-to-body
    :title="innerTitle"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <flow-main
      v-bind="$attrs"
      v-on="$listeners"
      :flow-key="flowKey"
      :visible="visible"
      @flow-data="onFlowData"
    ></flow-main>
  </el-dialog>
</template>

<script>
import FlowMain from '@/credit/components/flow/ViewMain'

export default {
  components: {
    FlowMain,
  },
  props: {
    visible: Boolean,
    title: String,
    flowKey: String,
  },
  data() {
    return {
      flowTitle: '',
    }
  },
  computed: {
    innerTitle() {
      return this.title || this.flowTitle
    },
  },
  watch: {
    flowKey() {
      this.flowTitle = ''
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    onFlowData(data) {
      this.flowTitle = data[0]?.workflow_name || ''
    },
  },
}
</script>

<style lang="scss" scoped></style>
